<template>
  <view class="score-card">
    <!-- 顶部积分显示 -->
    <view class="score-header">
      <view class="score-bar"></view>
      <text class="score-text">我的积分 : {{ userInfo.score }}</text>
    </view>
    
    <!-- 功能按钮 -->
    <view class="score-actions">
      <!-- 积分转账 -->
      <view class="action-item" @tap="sheep.$router.go('/pages/user/wallet/trans-score')">
        <view class="action-icon">
          <image class="icon-img" src="@/static/icon/score_trans.png" mode="aspectFit"></image>
        </view>
        <text class="action-text">积分转账</text>
      </view>
      
      <!-- 积分历史 -->
      <view class="action-item" @tap="sheep.$router.go('/pages/user/wallet/score')">
        <view class="action-icon">
          <image class="icon-img" src="@/static/icon/score_history.png" mode="aspectFit"></image>
        </view>
        <text class="action-text">积分历史</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  const userInfo = computed(() => sheep.$store('user').userInfo);
  const numData = computed(() => sheep.$store('user').numData);

</script>

<style lang="scss" scoped>
  .score-card {
    width: 100%;
    background: #fff;
    border-radius: 24rpx;
  }

  .score-header {
    display: flex;
    align-items: center;
    padding-top: 32rpx;
    margin-bottom: 40rpx;
    
    .score-bar {
      width: 8rpx;
      height: 40rpx;
      background: #FF9800;
      margin-right: 20rpx;
    }
    
    .score-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .score-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 32rpx;
  }

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .action-icon {
    width: 120rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    
    .icon-img {
      width: 120rpx;
      height: 120rpx;
    }
  }

  .action-text {
    margin-top: 12rpx;
    font-size: 32rpx;
    color: #333;
  }
</style>
